<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>多tab点击切换</title>
  <script src="jquery-1.11.3.min.js"></script>
  <style>
     *{
	    margin:0px;
		padding:0px;
	 }
     #div{
	   width:500px;
	   height:300px;
	   border:1px black solid;
	   margin:auto;
	   margin-top:50px;
	 }
	 #div ul{
		overflow:hidden;
	 }
	 #div ul li{
	    list-style:none;
		float:left;
		width:25%;
		height:30px;
		text-align:center;
		line-height:30px;
		border-bottom:0.5px rgb(242,242,242) solid;
	 }
	 #div ul li:hover{
	    cursor:pointer;
		color:white;
	 }
	 #div ul li:nth-of-type(1){
	     background-color:red;
	 }
	 #div ul li:nth-of-type(2){
	     background-color:blue;
	 }
	 #div ul li:nth-of-type(3){
	     background-color:yellow;
	 }
	 #div ul li:nth-of-type(4){
	     background-color:green;
	 }
	 #div .div1{
	    width:100%;
		height:270px;
		display:none;
	 }
	 #div #div1{
	     background-color:red;
		 display:block;
	 }
     #div #div2{
	    background-color:blue;
	 }
	 #div #div3{
	     background-color:yellow;
	 }
     #div #div4{
	    background-color:green;
	 }

  </style>
 </head>
 <body>
    <div id="div">
	 <ul>
	   <li>内容一</li>
	   <li>内容二</li>
	   <li>内容三</li>
	   <li>内容四</li>
	 </ul>
	 <div class="div1" id="div1"></div>
	 <div class="div1" id="div2"></div>
	 <div class="div1" id="div3"></div>
	 <div class="div1" id="div4"></div>
	</div>
 </body>
 <script>
    var $_div = $("#div .div1");
    $("#div ul li").click(function(){
	    $_div.css({"display":"none"});
		$_div.eq($(this).index()).css({"display":"block"});
	}); 
 </script>
</html>
